<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button v-auth="'task:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
        <el-button v-auth="'task:del:batch'" type="danger" plain icon="el-icon-delete"
                   :disabled="selection.length===0"
                   @click="batch_del"></el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-select v-model="search.role" placeholder="角色" clearable>
            <el-option v-for="item in roleList" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
          </el-select>
          <el-input v-model="search.name" placeholder="登录账号 / 姓名" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="upSearch"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <SailorTable ref="tableRef" :apiObj="Apis.api_task.list" @selection-change="selectionChange" stripe
                   remoteSort remoteFilter>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="唯一标识" prop="uuid" min-width="230" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createdAt" width="200" align="center"></el-table-column>
        <el-table-column label="任务名称" prop="taskName" min-width="200" show-overflow-tooltip
                         align="center"></el-table-column>
        <el-table-column label="任务cron" prop="taskCron" min-width="100" align="center"></el-table-column>
        <el-table-column label="任务类型" prop="taskTag" min-width="100" show-overflow-tooltip
                         align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.taskTag === 'internalFuncTask'" type="success">func</el-tag>
            <el-tag v-else-if="scope.row.taskTag === 'httpTask'" type="primary">http</el-tag>
            <el-tag v-else-if="scope.row.taskTag === 'shellTask'" type="danger">shell</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="任务状态" prop="taskStatus" min-width="100" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.taskStatus === 99" type="danger">已禁用</el-tag>
            <el-tag v-else-if="scope.row.taskStatus === 1" type="success">已启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" min-width="330">
          <template #default="scope">
            <el-button-group>
              <el-button v-auth="'task:info'" text type="primary" size="small"
                         @click="table_show(scope.row, scope.$index)">查看
              </el-button>
              <el-button v-auth="'task:edit'" text type="primary" size="small" @click="table_edit(scope.row)">编辑
              </el-button>
              <el-button v-auth="'task:run'" :loading="runLoading" text type="primary" size="small"
                         @click="handleRun(scope.row)">运行一次
              </el-button>
              <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
                <template #reference>
                  <el-button v-auth="'task:del'" :loading="delLoading" text type="danger" size="small">
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
              <el-dropdown>
                <el-button text type="primary" size="small">
                  更多
                  <el-icon class="el-icon--right">
                    <arrow-down/>
                  </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="changeStatus(scope.row)">
                      {{ scope.row.taskStatus === 99 ? '启用' : '禁用' }}
                    </el-dropdown-item>
                    <el-dropdown-item @click="showLogs(scope.row)">查看日志</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>

            </el-button-group>
          </template>
        </el-table-column>
      </SailorTable>
    </el-main>
  </el-container>

  <save ref="saveRef" @success="handleSuccess"></save>
  <logs ref="logsRef"></logs>
</template>

<script setup name="apis">
import Apis from '@/api'
import {reactive, ref} from "vue";
import SailorTable from "@/components/SailorTable/index.vue";
import save from './save.vue'
import logs from './logs.vue'
import {ArrowDown} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

let selection = reactive([])
let search = reactive({
  name: null
})

let tableRef = ref()
let saveRef = ref()
let logsRef = ref()

let delLoading = ref(false)
let runLoading = ref(false)


// 搜索
const upSearch = async () => {

}


const showLogs = async (row) => {
  logsRef.value.show(row.uuid)
}

const changeStatus = async (row) => {

}

const table_show = (row) => {
  saveRef.value.setData(row, 'show')
}

const table_edit = (row) => {
  saveRef.value.setData(row, 'edit')
}

const table_del = async (row) => {
  delLoading.value = true
  let res = await Apis.api_task.del.get({uuid: row.uuid})
  delLoading.value = false

  if (res.code === 0) {
    tableRef.value.tableData.splice(tableRef.value.tableData.findIndex(item => item.uuid === row.uuid), 1)
    ElMessage.success("操作成功")
  } else {
    ElMessage.error(res.message)
  }

}

const handleRun = async (row) => {
  runLoading.value = true
  let res = await Apis.api_task.run.get({uuid: row.uuid})
  runLoading.value = false

  if (res.code === 0) {
    ElMessage.success("运行成功")
  } else {
    ElMessage.error(res.message)
  }
}


//本地更新数据
const handleSuccess = (data, mode) => {
  if (mode === 'add') {
    data.id = new Date().getTime()
    tableRef.value.tableData.unshift(data)
  } else if (mode === 'edit') {
    tableRef.value.tableData.filter(item => item.id === data.id).forEach(item => {
      Object.assign(item, data)
    })
  }
}


</script>

<style>
</style>
